<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部添加、搜索 -->
        <HeadSearch :category="2" @addEvent="addFn" @Asearch="search" />

        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="calc(100vh - 247px)"
        >
          <el-table-column
            fixed
            prop="image"
            label="图片"
            width="200"
            align="center"
          >
            <template v-slot="{row}">
              <img :src="row.image" style="width:150px; height:200px; ">
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="200"
            align="center"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            width="200"
            align="center"
          />
          <el-table-column
            prop="phone"
            label="电话"
            width="200"
            align="center"
          />
          <el-table-column
            prop="address"
            label="地址"
            width="200"
            align="center"
          />
          <el-table-column
            prop="desc"
            label="介绍"
            width="300"
            align="center"
          />
          <el-table-column
            fixed="right"
            prop="props"
            label="操作"
            width="300"
            align="center"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="emitFn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[2, 5, 15, 30]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
      <!-- 对话框 -->
      <DialogForm :id="id" ref="DialogForm" :dialog-visible.sync="dialogVisible" @getAgentss="getAgentss" />
    </div>
  </div>
</template>

<script>

import HeadSearch from '../../components/HeadSearch.vue'
import DialogForm from '@/views/agents/components/DialogForm.vue'
import { getAgents, delAgents } from '@/api/agents'
export default {
  components: {
    HeadSearch,
    DialogForm
  },
  data() {
    return {
      currentPage: 1, //  // 当前页码
      pagesize: 2, // 每页的条数
      total: 0,
      tableData: [],
      dialogVisible: false, // 对话框显示隐藏
      id: '',
      startCurrentPage: 0, // 从第几条开始显示
      name_contains: ''
    }
  },
  created() {
    this.getAgents()
    this.getagentsCount()
  },

  methods: {
    getAgentss() {
      this.currentPage = 1
      this.pagesize = 2
      this.startCurrentPage = 0
      this.name_contains = ''
      this.getAgents()
      this.getagentsCount()
    },
    // 获取经济列表
    async getagentsCount(name_contains) {
      const res = await getAgents({
        _limit: 9999, // 每页的条数
        _start: 0, // 从第几条开始显示
        name_contains: name_contains
      })
      this.total = res.length
    },
    // 更新列表
    async getAgents(name_contains) {
      this.tableData = await getAgents({
        _limit: this.pagesize, // 每页的条数
        _start: this.startCurrentPage, // 从第几条开始显示
        name_contains: name_contains
      })
    },
    // 添加
    addFn() {
      this.dialogVisible = true
    },
    // 点击每页展示数量预选的时候触发的函数
    handleSizeChange(size) {
      console.log(11, size)
      this.pagesize = size
      if (this.name_contains === '') {
        this.getAgents()
      } else {
        this.getAgents(this.name_contains)
      }
    },
    // 当前页码发生变化时触发的函数
    handleCurrentChange(page) {
      // console.log(128, page)
      this.currentPage = page
      this.startCurrentPage = (page - 1) * this.pagesize
      if (this.name_contains === '') {
        this.getAgents()
      } else {
        this.getAgents(this.name_contains)
      }
    },
    // 删除
    delFn(id) {
      // console.log(id)
      // await delAgents(id)
      this.$confirm('此操作将永久删除, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // console.log(1)

        // 当长度等于1 的时候
        if (this.tableData.length === 1 && this.currentPage > 1) {
          // 当前页面
          this.currentPage = this.currentPage - 1
          this.startCurrentPage = (this.currentPage - 1) * this.pagesize
        }
        await delAgents(id)
        this.getAgents()
        this.getagentsCount()
        this.$message.success('删除成功')
      }).catch(() => {
        console.log('取消')
      })
    },
    // 编辑
    emitFn(id) {
      this.id = id
      this.dialogVisible = true
      this.$refs.DialogForm.emitFnFormData(id)
    },
    // 搜索
    async  search(input) {
      this.name_contains = input
      this.currentPage = 1
      this.startCurrentPage = 0
      this.getAgents(this.name_contains)
      this.getagentsCount(this.name_contains)
    }
  }
}
</script>

<style>

</style>
